<!-- subpkg_consult/payment/index.vue -->
<script setup>
  import {
    patientConsultOrderPreApi,
    patientConsultOrderApi,
  } from '@/services/consult.js'
  import { patientInfoApi } from '@/services/archive.js'
  import useConsultStore from '@/stores/consult.js'
  import { ref } from 'vue'
  import { patientConsultPayApi } from '../../services/payment'

  const consultStore = useConsultStore()

  const data = ref({})

  const patientInfo = ref({})

  ;(async () => {
    const res = await patientInfoApi(consultStore.patientId)
    patientInfo.value = res.data
  })()
  ;(async () => {
    const res = await patientConsultOrderPreApi({
      type: consultStore.type,
      illnessType: consultStore.illnessType,
    })
    data.value = res.data
  })()

  const paymentPopupRef = ref(null)

  const pay = async (eventData) => {
    console.log(eventData, 'eventData')
    const res = await patientConsultOrderApi({
      type: consultStore.type,
      patientId: consultStore.patientId,
      illnessDesc: consultStore.illnessInfo.illnessDesc,
      depId: consultStore.depId,
      consultFlag: consultStore.illnessInfo.consultFlag,
      illnessType: consultStore.illnessType,
      // 发请求前再做数据映射
      pictures: consultStore.illnessInfo.pictures.map((v) => ({
        id: v.uuid,
        url: v.url,
      })),
      illnessTime: consultStore.illnessInfo.illnessTime,
    })

    const res2 = await patientConsultPayApi({
      paymentMethod: eventData.index,
      orderId: res.data.id,
      payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
    })

    consultStore.clear()

    // console.log(res2, 'res2')

    // #ifdef H5
    uni.showLoading({
      title: '跳转支付中...',
      mask: true,
    })
    window.location.href = res2.data.payUrl
    // #endif

    // #ifdef MP-WEIXIN
    wx.requestPayment({
      // 有四个参数，
    })
    // #endif
  }

  const onClose = async () => {
    const { cancel } = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    if (cancel) {
      paymentPopupRef.value.close()
    }
  }
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${(data.payment || 0).toFixed(2)}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${(data.couponDeduction || 0).toFixed(2)}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red"
                >-¥{{ (data.pointDeduction || 0).toFixed(2) }}</view
              >
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red"
                >¥{{ (data.actualPayment || 0).toFixed(2) }}</view
              >
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        title="患者资料"
      >
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo.name || '' }} |
                {{ patientInfo.genderValue || '' }} |
                {{ patientInfo.age || 0 }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            border
            title="病情描述"
            :note="consultStore.illnessInfo.illnessDesc || ''"
          />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计:
        <text class="number">¥{{ (data.actualPayment || 0).toFixed(2) }}</text>
      </view>
      <button class="uni-button" @click="paymentPopupRef.open('bottom')">
        立即支付
      </button>
    </view>
  </scroll-page>

  <custom-payment
    ref="paymentPopupRef"
    :amount="(data.actualPayment || 0).toFixed(2)"
    @confirm="pay"
    @close="onClose"
  />
</template>

<style lang="scss">
  // subpkg_consult/payment/index.scss
  .payment-page {
  }

  :deep(.uni-section-header) {
    font-weight: 500 !important;
    padding-left: 30rpx !important;
    padding-bottom: 0 !important;
  }

  :deep(.uni-section-content) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  :deep(.uni-list-item__container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :deep(.uni-list-item__content-title) {
    font-size: 32rpx !important;
    color: #3c3e42 !important;
  }

  :deep(.uni-list-item__extra-text) {
    font-size: 32rpx !important;
    color: #3c3e42 !important;
  }

  :deep(.uni-list-item__content-note) {
    font-size: 28rpx !important;
  }

  :deep(.uni-list-item__icon) {
    margin-right: 0 !important;
  }

  :deep(.uni-icon-wrapper) {
    padding: 0 !important;
    margin-right: -10rpx !important;
    font-size: 36rpx !important;
  }

  .dividing-line {
    height: 30rpx;
    background-color: #f6f6f6;
  }

  .uni-list-text-red {
    color: #eb5757;
  }

  .uni-list-text-gray {
    color: #848484;
    font-size: 30rpx;
  }

  .payment-agreement {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 180rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;

    :deep(.uni-radio-input) {
      transform: scale(0.9);
      margin-right: 0 !important;
    }

    /* #ifndef MP */
    radio {
      transform: scale(0.7);
      margin-right: -5rpx !important;
    }
    /* #endif */
  }

  .next-step {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: #fff;

    .uni-button {
      width: 400rpx;
    }

    .total-amount {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #3c3e42;
    }

    .number {
      font-size: 40rpx;
      color: #eb5757;
      margin-left: 10rpx;
    }
  }
</style>
